<template>
<view>
<view class="container">
	<uni-nav-bar title="订单列表" left-icon="back"  fixed="true" color="#353535" backgroundColor="#fff" @clickLeft="goback"></uni-nav-bar>
    <view v-if="!hasRefund" class="status-box">
        <view v-for="(item, index) in statusType" :key="index" @tap="statusTap" :class="'status-label ' + (item.status == status ? 'active' : '')" :data-status="item.status">
        {{item.label}}
        <view v-if="badges[index]" class="weui-badge" style="position: absolute;top: 5rpx;right: 5rpx;">{{badges[index]}}</view>
        </view>
    </view>
	<view class="orders">
		<view v-for="(item, index) in orderList" :key="index" class="order" @tap="todetail" :data-id="item.id">
		    <!-- <navigator url="../orderDetail/orderDetail?id={{item.id}}" class="order" wx:for="{{orderList}}" wx:key="{{item.id}}"> -->
		        <view class="h">
		            <view class="l">订单编号：{{item.orderSn}}</view>
		            <view class="r">{{item.statusStr}}</view>
		        </view>
		        <view v-for="(gitem, index2) in item.orderItemList" :key="index2" class="goods">
		            <view class="top">
		                <view class="img">
		                    <image :src="gitem.productPic"></image>
		                </view>
		                <view class="info">
							<view class="one">
								<text class="name">{{gitem.productName}}</text>
								<text class="price">￥{{gitem.productPrice}}</text>
							</view>
		                    <view class="two">
								<view class="atrr">{{gitem.sku.sku}}</view>
								<view class="number">X{{gitem.productQuantity}}</view>
							</view>
		                </view>
		                <!-- <view class="status"></view> -->
		            </view>
		        </view>
		        <view class="bottom">
		            <view class="l">共{{item.orderItemList.length}}件商品，实付款：</view>
		            <view class="r">￥{{item.payAmount}}</view>
		        </view>
		        <!-- <view class="b">
		            <view class="r">实付：￥{{item.payAmount}}</view>
		        </view> -->
				<view style="width:690rpx; height:2rpx; background:#f1f1f1"></view>
		        <view class="b">
		            <view class="r">
		                <view class="btn l" :data-order-index="item.id" @tap.stop="cancelOrder" v-if="item.status < 1">取消订单</view>
		                <view class="btn l" :data-order-index="item" @tap.stop="updateAddress" v-if="item.status < 2">修改地址</view>
		                <view class="btn r" :data-order-index="item.id" @tap.stop="payOrder" v-if="item.status == 0">去付款</view>
		                <view class="btn r" :data-order-index="item.id" @tap.stop="confirm" v-if="item.status == 2">确认收货</view>
						<view class="btn 1" :data-order-index="item.id" @tap.stop="deleteoeder" v-if="item.status == 3 ">删除订单</view>
		            </view>
		        </view>
		    <!-- </navigator> -->
		</view>
	</view>
</view>
<login :show="showLoginDialog" @success="onLigonSuccess"> </login>
</view>
</template>

<script>
var util = require("../../../utils/util.js");
var api = require("../../../config/api.js");
var pay = require("../../../services/pay.js");
import login from "../../component/login/login";
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"

export default {
  data() {
    return {
      orderList: [],
      showLoginDialog: false,
      statusType: [{
        status: -1,
        label: '全部'
      }, {
        status: 0,
        label: '待付款'
      }, {
        status: 1,
        label: '待发货'
      }, {
        status: 2,
        label: '待收货'
      }, {
        status: 3,
        label: '已完成'
      }],
      status: -1,
      hasRefund: false,
      array: ['原因1', '原因2'],
      index: 0,
      pageNo: 1,
      pageSize: 3
    };
  },

  components: {
    login,
	uniNavBar
  },
  props: {},
  onShareAppMessage: function (res) {
    return {
      title: '琅琊严选',
      path: '/pages/index/index'
    };
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    console.log("status==" + options.status);

    if (options.status) {
      this.setData({
        status: options.status
      });
    }
  },
  onShow: function () {
    this.getOrderList();
  },
  onReachBottom: function () {
    this.getMoreOrderList();
  },
  onPullDownRefresh: function () {
    uni.showNavigationBarLoading(); //在标题栏中显示加载

    this.getOrderList(); //模拟加载

    setTimeout(function () {
      // complete
      uni.hideNavigationBarLoading(); //完成停止加载

      uni.stopPullDownRefresh(); //停止下拉刷新
    }, 1500);
  },
  methods: {
	  goback(){
		  uni.navigateBack()
	  },
    statusTap: function (e) {
      const status = e.currentTarget.dataset.status;
      this.setData({
        status: status,
        pageNo: 1
      });
      this.getOrderList();
    },

    getOrderList() {
      let that = this;
      uni.showLoading();
      this.setData({
        pageNo: 1
      });
      util.request(api.OrderList, {
        status: that.status,
        pageNo: that.pageNo,
        pageSize: that.pageSize
      }).then(function (res) {
        uni.hideLoading();

        if (res.errno == 0) {
          console.log(res.data);
          that.setData({
            orderList: res.data.list
          });
        } else if (res.status == 500) {
          that.showLogin();
        }
      });
      that.setData({
        pageNo: that.pageNo + 1
      });
    },
    todetail(e){
		let orderid = e.currentTarget.dataset.id;
		uni.navigateTo({
			url: '/pages/ucenter/orderDetail/orderDetail?id=' + orderid
		})
	},
    getMoreOrderList() {
      let that = this;
      var dataList = [];
      var orderList = that.orderList;
      util.request(api.OrderList, {
        status: that.status,
        pageNo: that.pageNo,
        pageSize: that.pageSize
      }).then(function (res) {
        if (res.errno == 0) {
          dataList = res.data.list;

          if (dataList != null && dataList.length > 0) {
            orderList = orderList.concat(dataList);
            that.setData({
              orderList: orderList
            });
          }
        } else if (res.status == 500) {
          that.showLogin();
        }
      });
      that.setData({
        pageNo: that.pageNo + 1
      });
    },

    payOrder(e) {
      console.log("==payOrder==" + JSON.stringify(e));
      pay.payOrder(e.currentTarget.dataset.orderIndex).then(res => {
        uni.redirectTo({
          url: '/pages/payResult/payResult?status=1'
        });
      }).catch(res => {
        uni.redirectTo({
          url: '/pages/payResult/payResult?status=0'
        });
      }); // wx.redirectTo({
      //   url: '/pages/pay/pay',
      // })
    },

    cancelOrder(e) {
      var that = this;
      util.post(api.OrderCancel, {
        orderId: e.currentTarget.dataset.orderIndex
      }).then(function (res) {
        if (res.errno == 0) {
          console.log(res.data);
          that.getOrderList();
        }
      });
    },

    updateAddress(e) {
      var order = e.currentTarget.dataset.orderIndex;
	 
	  //console.log("==updateAddress=="+JSON.stringify(order))
      uni.navigateTo({
        // url: '/pages/ucenter/orderAddress/address?order=' + JSON.stringify(order)
		url: '/pages/ucenter/orderAddress/address?order=' + order.id
      });
    },

    confirm: function (e) {
      util.post(api.OrderConfirm, {
        orderId: e.currentTarget.dataset.orderIndex
      }).then(function (res) {
        if (res.errno == 0) {
          that.getOrderList();
        }
      });
    },
    showLogin: function () {
      console.log("==show login==");
      this.setData({
        showLoginDialog: true
      });
    },
    onLigonSuccess: function () {
      console.log("==onLigonSuccess==");
      this.getOrderList();
    }
  }
};
</script>
<style>
page{
    height: 100%;
    width: 100%;
    background: #f4f4f4;
}

.status-box{
    width:100%;
    height: 88rpx;
    line-height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
}
.status-box .status-label{
    width: 150rpx;
    height: 100%;
    text-align: center;
    font-size:28rpx;
    color:#353535;
    box-sizing: border-box;
    position: relative;
}
.status-box .status-label.active{
    color: #b28850;
    border-bottom: 6rpx solid #b28850;
	font-size: 30rpx;
}

.orders{
    height: auto;
    width: 100%;
    overflow: hidden;
    background-color: #f1f1f1;
}

.order{
    margin: 20rpx 30rpx;
    background: #fff;
    border-radius: 12rpx;
    padding-right: 20rpx;
}

.order .h{
    height: 64rpx;
    padding-top: 20rpx;
    margin-left: 20rpx;
    /* border-bottom: 1px solid #f4f4f4; */
    font-size: 24rpx;
    color: #888888;
}

.order .h .l{
    float: left;
	color:#888888;
	font-size: 24rpx;
}

.order .h .r{
    float: right;
    color: #b28850;
    font-size: 24rpx;
}

.order .goods{
    display: flex;
    margin-left: 20rpx;
    flex-direction: column;
	margin-top: 40rpx;
}

.order .goods .top{
    align-items: center;
   /* height: 199rpx; */
    display: flex;
	position: relative;
}

.order .bottom{
    display: flex;
    flex-direction: row;
    text-align: right;
	margin-top: 30rpx;
	margin-bottom: 30rpx;
}

.order .bottom .l{
    color: #353535;
    flex: 1;
}

.order .bottom .r{
    color: #d73d2e;
}

.order .goods .top .img{
    height: 156rpx;
    width: 156rpx;
}

.order .goods .top .img image{
    height: 156rpx;
    width: 156rpx;
}

.order .goods .top .info{
    height: auto;
    flex: 1;
	position: absolute;
	left: 176rpx;
	top: 0;
	width: 474rpx;
}
.order .goods .top .info .one{
	display:flex;
	justify-content:space-between;
}
.order .goods .top .info .one .name{
	padding-right:30rpx;
    color: #353535;
    font-size: 28rpx;
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}
.order .goods .top .info .one .price{
    color: #353535;
    font-size: 28rpx;
}
.order .goods .top .info .two{
	display: flex;
	justify-content:space-between;
	margin-top: 20rpx;
}
.order .goods .top .info .two .atrr{
	color: #888888;
	font-size: 24rpx;
	background: #f1f1f1;
	padding: 0 12rpx;
}

.order .goods .top .number{
    display: block;
    color: #888888;
    font-size: 24rpx;
}

.order .goods .top .status{
    width:105rpx;
    color: #b4282d;
    font-size: 25rpx;
}

.order .b{
    height: 100rpx;
    line-height: 100rpx;
    font-size: 30rpx;
    color: #333;
}

.order .b .l{
    float: left;
}

.order .b .r{
    display: flex;
    flex-direction: row;
    float: right;
    align-items: center;
    justify-content: center;
}
.order .b .btn{
    margin-top: 22rpx;
    height: 56rpx;
    line-height: 56rpx;
	width: 140rpx;
    text-align: center;
    padding: 0 20rpx;
    border-radius: 28rpx;
    font-size: 24rpx;
    color: #353535;
    border: 2rpx solid #e5e5e5;
    margin-left: 20rpx;
}
.order .b .btn.l{
    color: #353535;
    border: 2rpx solid #e5e5e5;
}
.order .b .btn.r{
    color: #b28850;
    border: 2rpx solid #b28850;
}
</style>